<template>
    <view class="adviserBox bg-fff" v-if="list.length > 0">
        <block v-if="list.length > 0">
            <view class="titleWrap flex">
                <view class="title font15 fontBold">为您推荐优秀置业顾问</view>
                <view class="more flex font12 col-grey" @click="toMoreDeatil">
                    <text class="right-3">查看更多</text>
                    <u-icon name="arrow-right" color="#8A8A8A" size="12"></u-icon>
                </view>
            </view>
            <block v-for="(item, index) in list" :key="index">
                <view :class="index === 0 ? 'top-10' : 'top-5'">
                    <adviser-item :detail="item" :productId="product.id"></adviser-item>
                </view>
            </block>
            <view class="tipsBox flex font12 col-grey top-15">
                <view class="tipItem">
                    <text class="iconItem bg iconMianfei right-3"></text>免费咨询
                </view>
                <view class="tipItem">
                    <text class="iconItem bg iconFuwu right-3"></text>服务专业
                </view>
                <view class="tipItem">
                    <text class="iconItem bg iconJiedu right-3"></text>全面解读
                </view>
                <view class="tipItem">
                    <text class="iconItem bg iconWenda right-3"></text>在线问答
                </view>
            </view>
        </block>
    </view>
</template>

<script>
import { mapState } from 'pinia';
import { useConfigStore } from '@/store/index';
export default {
    data() {
        return {
        }
    },
    props: {
        product: {
            type: Object,
            default: () => ({})
        },
        list: {
            type: Array,
            default: () => ([])
        }
    },
    computed: {
        ...mapState(useConfigStore, ['puid'])
    },
    methods: {
        toMoreDeatil() {
            uni.navigateTo({
                url: `/pages/product/seller/index?productId=${this.product.id}&title=${this.product.title}&puid=${this.puid}&lat=${this.product.lat}&lng=${this.product.lng}&prepage=楼盘详情页-${this.product.id}-${this.product.title}`
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.adviserBox {
    margin: 50rpx 22rpx 0 22rpx;

    .titleWrap {
        justify-content: space-between;
    }

    .tipsBox {
        justify-content: space-between;

        .tipItem {
            .iconItem {
                width: 28rpx;
                height: 28rpx;
                display: inline-block;
                vertical-align: middle;
                background-size: contain;
            }

            .iconMianfei {
                background-image: url("https://image.srea.org.cn/xcx/icon/icon-detail-adviser-mianfei.png");
            }

            .iconFuwu {
                background-image: url("https://image.srea.org.cn/xcx/icon/icon-detail-adviser-fuwu.png");
            }

            .iconJiedu {
                background-image: url("https://image.srea.org.cn/xcx/icon/icon-detail-adviser-jiedu.png");
            }

            .iconWenda {
                background-image: url("https://image.srea.org.cn/xcx/icon/icon-detail-adviser-huida.png");
            }
        }
    }
}
</style>
